<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: type=== 'all'}" 
				@click="changeFn('all')"
				href="javascript:;">全部</a>
			</li>
			<li>
				<a :class="{selected: type=== 'active'}"
					@click="changeFn('active')"
				 href="javascript:;">未完成</a>
			</li>
			<li>
				<a :class="{selected: type=== 'complete'}"
					@click="changeFn('complete')"
				 href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed"
		@click="clearFnAsync"
		 v-show="clearShow">清除已完成</button>
	</footer>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		computed:{
			...mapGetters(['leftCount','clearShow']),
			...mapState(['list','type'])
		},
		methods:{
			...mapMutations(['changeFn']),
			...mapActions(['clearFnAsync'])
		}
	}
</script>
